<template>
    <div class="container">
        <template v-if="loading">
            <el-skeleton :loading="loading" :rows="10" animated />
        </template>

        <template v-if="!loading">
            <div class="path-content">
                <div class="content">
                    <!-- 排序规则 -->
                    <div class="sortRegular">
                        <div class="button-container">
                            <el-radio-group v-model="sortRegular">
                                <el-radio-button label="按城市数量排序"></el-radio-button>
                                <el-radio-button label="按旅途费用排序"></el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <!-- 推荐路线 -->
                    <div class="recommand">
                        <div class="item-container">
                            <div class="item" v-for="(item,index) in paths" :key="index" >
                                <!-- 序号 -->
                                <div class="Index">
                                    <span>{{index + 1}}</span>
                                </div>


                                <div class="travel-path">
                                    <el-steps :active="item.path.length" space=150px align-center>
                                        <el-step v-for="city in item.path" :key="city" :title="city">
                                            <template #icon>
                                                <img src="../../assets/cityIcon.png" class="cityIcon" alt="">
                                            </template>
                                        </el-step>
                                    </el-steps>
                                </div>
                            </div>
                        </div>


                        <!-- 分页 -->
                        <div class="page">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="pageChange"
                                :current-page.sync="curPage"
                                :page-size="pageSize"
                                :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
import { getCityPath } from '../../api/travel';
import { sortByArrayLength,sortBy } from '../../Utils/sortBy'
export default {
    name: 'TourismProjectPath',

    data() {
        return {
            loading:true,
            sortRegular: '按城市数量排序',
            pathsRes:[],
            paths:[],
            total:0,
            pageSize:5,
            curPage:1
        };
    },

    watch: {
        sortRegular(){ 
            if(this.sortRegular == '按城市数量排序'){ 
                this.sortByArrayLength();
            } else { 
                this.sortByPrice();
            }

            this.curPage = 1;
            this.pageChange();

            return ;
        }
    },

    created() {
        let params = this.$route.params;
        if(params.start == undefined || params.end == undefined){
            this.$router.go(-1) 
            return ;
        }

        this.getCityPath();
    },

    methods: {
        getCityPath(){ 
            let data = { 
                start:this.$route.params.start,
                end:this.$route.params.end
            }

            getCityPath(data).then(res=>{ 
                console.log("查找路线",res);
                //更新数据
                this.pathsRes = res.data;
                this.sortByArrayLength();
                let start = (this.curPage - 1) * this.pageSize;
                this.paths = this.pathsRes.slice(start,start + this.pageSize);
                this.total = this.pathsRes.length;

                this.loading = false;
                this.$message({ 
                    type:'success',
                    message:'查询成功'
                })
            })
        },

        /**
         * 根据城市数量排序
         */
        sortByArrayLength(){ 
            this.pathsRes.sort(sortByArrayLength('path'));
            this.curPage = 1;
        },

        /**
         * 根据旅途费用排序
         */
        sortByPrice(){ 
            this.pathsRes.sort(sortBy('price'));
            this.curPage = 1;
        },

        /**
         * 分页 
         */
        pageChange(){ 
            let start = (this.curPage - 1) * this.pageSize;
            // console.log("分页")
            this.paths = this.pathsRes.slice(start,start + this.pageSize);
            // console.log("paths = ",this.paths);
        }
    },
};
</script>

<style lang="less" scoped>
.container{ 
    width: 100%;
    .path-content{ 
        width: 100%;
        height: 100%;
        background-image: url('../../assets/pathBack.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        .content{ 
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            .sortRegular{ 
                width: 100%;
                height: 3.125rem;
                display: flex;
                justify-content: flex-end;
                .button-container{ 
                    padding: 5px 15px;
                }
            }

            .recommand{ 
                width: 75rem;
                margin: 0 auto;
                .item-container{ 
                    height: 32.5rem;
                    .item{ 
                        width: 100%;
                        height: 6.525rem;
                        display: flex;
                        flex-direction: row;
                        .Index{ 
                            width: 6.25rem;
                            height: 3.125rem;
                            text-align: center;
                            span{ 
                                line-height: 3.125rem;
                                color:#fff;
                                font-size: 1.5625rem;
                            }
                            
                        }

                        .travel-path{ 
                            width: 100%;
                            padding: 0px 1.25rem;
                            .cityIcon{ 
                                width: 3.125rem;
                                height: 3.125rem;
                            }
                        }
                    }
                }
                
            }

            .page{ 
                text-align: center;
            }
        }
    }
}
</style>